<template>
  <div>
    <group>
      <datetime v-model="date" format="YYYY-MM" title="日期" :end-date="today"></datetime>
    </group>
    <button-tab>
      <button-tab-item selected @on-item-click="search('1')">月度</button-tab-item>
      <button-tab-item @on-item-click="search('2')">年度</button-tab-item>
    </button-tab>
    <div id="container4" style="width: 100%;height:280px;"></div>
    <group>
      <cell title="本月" :value="monthvalue"></cell>
      <cell title="本年" :value="yearvalue"></cell>
      <cell title="月度环比" :value="lastmonthvalue + '(' + lastmonthpercent + ')'"></cell>
      <cell title="月度同比" :value="lastyearmonthvalue + '(+' + lastyearmonthpercent + ')'"></cell>
      <cell title="年度环比" :value="lastyearvalue + '(' + lastyearpercent + ')'"></cell>
    </group>
  </div>
</template>

<script>
export default {
  name: 'EnergyAir',
  data () {
    return {
      date: '',
      today: '',
      isLoaded: false,
      type: '1',
      monthvalue: '576',
      yearvalue: '1375.0000',
      lastmonthvalue: '799',
      lastyearmonthvalue: '0',
      lastyearvalue: '6463.0000',
      lastmonthpercent: '-27.91%',
      lastyearmonthpercent: '100%',
      lastyearpercent: '-91.09%'
    }
  },
  methods: {
    init () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      month < 10 && (month = '0' + month)
      day < 10 && (day = '0' + day)
      this.today = this.date = `${year}-${month}-${day}`
    },
    search (e) {
      var type = typeof e === 'string' ? e : e.target.title
      this.type = type
      var dateStr = type === '1' ? this.date.slice(0, 7) : this.date.slice(0, 4)
      var str = 't=' + type + '&d={code:320101A068,date:' + dateStr + ',ctype:2}'
      var option = {
        title: {
          text: '能耗(kW)',
          textStyle: {
            fontSize: 13
          }
          // left: 'center'
        },
        grid: {
          // x:'5%',
          y: '13%',
          x2: '5%',
          y2: '10%'
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   textStyle: {
        //     align: 'left'
        //   }
        // },
        legend: {
          // left: 'left',
          itemWidth: 35, // 标志图形的长度
          itemHeight: 10,
          textStyle: {
            fontSize: 12
          }
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     magicType: {type: ['line', 'bar']},
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // name: 'x',
          // splitLine: {show: false},
          // axisLabel: { interval: 11 },
          data: []
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        yAxis: {
          type: 'value'
          // scale: true,
          // axisLabel: {
          //   formatter: '{value}kW'
          // }
        },
        series: {
          name: '最近15天',
          type: 'line',
          data: [],
          connectNulls: true,
          lineStyle: {
            normal: {}
          }
          // data:[11, 11, 15, 13, 12, 13, 10],
          // markPoint: {
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ],
          //   symbolSize: 30
          // }
        }
      }
      this.ajax('/ystApp/TargetInfo', str).then(res => {
        var bean = res.ttbean
        this.monthvalue = bean.monthvalue
        this.yearvalue = Number(bean.yearvalue)
        this.lastmonthvalue = bean.lastmonthvalue
        this.lastyearmonthvalue = bean.lastyearmonthvalue
        this.lastyearvalue = Number(bean.lastyearvalue)
        this.lastmonthpercent = bean.lastmonthpercent
        this.lastyearmonthpercent = bean.lastyearmonthpercent
        this.lastyearpercent = bean.lastyearpercent
        var list = bean.comparebeanlist.concat(bean.tdvbeanlist)
        var xList = []
        var yList = []
        for (var i of list) {
          if (i.targetvalue !== '0.0') {
            xList.push(i.datevalue.slice(5))
            yList.push(i.targetvalue)
          }
        }
        option.xAxis.data = xList
        option.series.data = yList
        option.series.name = type === '1' ? '最近15天' : '最近一年'
        window.myChart.setOption(option)
      })
    }
  },
  created () {
    this.init()
  },
  mounted () {
    window.myChart = window.echarts.init(document.getElementById('container4'), 'light')
    this.search('1')
  },
  watch: {
    month () {
      if (!this.isLoaded) {
        this.isLoaded = true
        return
      }
      this.search(this.type)
    }
  }
}
</script>

<style scoped>

</style>
